<style lang='scss'>
    .addlabel-title{
        display: block;
        font-size: 13px;
        background-color: #fff;
        padding: 12px 16px;
        border-bottom: 1px solid #ddd;
        margin: 0 -10px 6px -12px;
    }
</style>
<template>
	<div>
        <div class="addlabel-title" v-if="$route.query.id">
            {{type === 'add' ? '承运商服务对照表 / 新增' : '承运商服务对照表 / 编辑'}}
        </div>
		<compWrapper title="基本信息" style="padding: 10px">
			<compFormQuery v-if=" type === 'query'" class="margin-top-15" :formdata="getBase" :value="formData"></compFormQuery>
            <compFormEdit v-else ref="formbase" class="margin-top-15" :formdata="getBase" v-model="formData"></compFormEdit>
		</compWrapper>
        <compWrapper title="操作历史" v-if=" type === 'query' ">
			<compLog class="margin-15" :data="opLogList" :columns="logcolumn"></compLog>
		</compWrapper>
		<div v-if="type != 'query'" class="text-right margin-top-10">
			<Button type="primary" @click="submit">保存</Button>
			<Button v-if="type != 'add'" class="margin-left-10" @click="onCancel">返回</Button>
		</div>
		<Spin v-if="loading" fix></Spin>
	</div>
</template>

<script>
import { HttpCarrierServiceComparisonDetail, HttpCarrierServiceComparisonSave, HttpCarrierList } from '@/service/api/views';
import { mapGetters } from "vuex";
import mixins from '../mixin'

export default {
	props:['querytype','activeid'],
    mixins: [ mixins ],
	data() {
		return {
            type: this.querytype || this.$route.params.type,
            id: this.activeid || this.$route.query.id,
            loading: false,
            formData: {
            },
            carrierList: [],
            opLogList: [],
		};
	},
	created() {
        this.getCarrierList();
        this.getDetail();
	},
	computed: {
         ...mapGetters('dictionary',['getSysAllList']),
		getBase() {
			return [
                {
                    label: 'Carrier',
                    key: 'carrierId',
                    tag: 'Select',
                    options: this.carrierList,
                    props:{
                        filterable: true,
                    },
                },
                {
                    label: 'Service',
                    key: 'carrierService',
                },
                {
                    label: 'Service Code',
                    key: 'carrierServiceCode',
                },
                {
                    label: 'Transit Time',
                    key: 'remark',
                    required: false,
                },
			];
		},
        logcolumn(){
            return [
                {
                    title: this.$ct('global.common.operate_time',{defaultValue:'操作时间'}),
                    key: 'createdAt',
                },
                {
                    title: this.$ct('global.common.operator',{defaultValue:'操作人'}),
                    key: 'createdName',
                },
                {
                    title: this.$ct('global.common.operate_type',{defaultValue:'操作类型'}),
                    render:(h,{row})=>{
                        return this.getLogActions[row.operateType] || '--';
                    }
                },
                {
                    title: '说明',
                    key: 'remark',
                },
            ]
        }
	},
	methods: {
        getCarrierList(){
            HttpCarrierList({'search[EQ_active]': 1}).then(res=>{
                this.carrierList = res.data.map(item=>{
                    return {
                        value:item.id,
                        label:item.carrierCode+' ('+item.carrierName+')',
                        attach: item,
                    }
                })
            })
        },
        onCancel() {
            if(this.type == 'add'){
                this.$emit('on-update');
                this.$emit('on-close');
            }else{
                this.$router.push({
                    name: "tmsCarrierserviceList"
                })
            }
		},
		getDetail() {
			if (this.type === "add") return;
			this.loading = true;
			HttpCarrierServiceComparisonDetail({
				id: this.id,
			}).then(res => {
                this.formData = res.data;
                this.opLogList = res.data.orderLogsEntityList;
                this.loading = false;
			}, err => {
				this.loading = false;
				this.$Message.error(err.message);
			});
		},
		async submit() {
			const valid = await this.$refs.formbase.validate();
			if (!valid) return;
			this.loading = true;
			HttpCarrierServiceComparisonSave({
                ...this.formData,
			}).then(res => {
				this.loading = false;
                this.$Message.success(res.message)
				this.onCancel();
			}, err => {
				this.loading = false;
				this.$Message.error(err.message);
			})
		},
	}
};
</script>
